<template>
  <div class="parking_reconciliation">
    <header>
      <!-- <el-form>
        <el-form-item>
          <el-input style="width: 240px;" clearable placeholder="订单号/流水号"></el-input>
        </el-form-item>
      </el-form> -->
    </header>

    <section>
      <el-table :data="tableData" height="100%" border>
        <el-table-column label="订单号" prop="tradeNo" align="center"></el-table-column>
        <!-- <el-table-column label="流水号" prop="" align="center"></el-table-column> -->
        <el-table-column label="车场名称" prop="parkName" align="center"></el-table-column>
        <el-table-column label="交易时间" prop="tradeTime" align="center"></el-table-column>
        <!-- <el-table-column label="交易内容" prop="" align="center"></el-table-column> -->
        <el-table-column label="支付账户" align="center">
          <template slot-scope="scope">
            {{ scope.row.tradeAccount | tradeAccountFilter}}
          </template>
        </el-table-column>
        <el-table-column label="中萌金额(元)" prop="platformAmount" align="center"></el-table-column>
        <el-table-column label="泊链金额(元)" prop="bolianAmount" align="center"></el-table-column>
        <!-- <el-table-column label="对账状态" prop="" align="center"></el-table-column> -->
        <el-table-column label="操作" prop="" align="center"></el-table-column>
      </el-table>
    </section>

    <footer>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.current"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="formData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </footer>


  </div>
</template>

<script>
  export default {
    filters: {
      tradeAccountFilter(tradeAccount) {
        return tradeAccount == 1 ? '中萌支付' : '泊链支付'
      }
    },
    data() {
      return {
        total: 0,
        formData: {
          current: 1,
          size: 10,
        },
        tableData: []
      }
    },
    mounted() {
      this.getTableData();
    },
    methods: {
      handleSizeChange(val) {
        this.formData.size = val;
        this.getTableData();
      },

      handleCurrentChange(val) {
        this.formData.current = val;
        this.getTableData();
      },

      getTableData() {
        this.$axios({
          method: 'get',
          url: '/order/orderHistory/selectOrderCompareResult',
          params: this.formData
        }).then((res) => {
          console.log(333,res)
          if(res.code == 200) {
            this.tableData = res.data.records;
            this.total = res.data.total;
          } else {
            this.$message(res.desc)
          }
        })
      }

    }
  }
</script>

<style scoped>
  .parking_reconciliation {
    height: calc(100vh - 84px);
    padding: 0 20px;
  }

  header {
    height: 50px;
    padding: 5px 0;
  }

  section {
    height: calc(100% - 110px);
  }

  footer {
    height: 50px;
    text-align: center;
    margin-top: 10px;
  }




</style>
